<template>
  <div class="submit-order-container">
    <div class="header">
      <div class="title">提交订单</div>
      <div class="more-options">
        <i class="icon-more"></i>
      </div>
      <div class="refresh-icon">
        <i class="icon refresh"></i>
      </div>
    </div>
    <div class="title-container">
      <h3>{{ package.rname }}</h3>
      <div class="packageame">{{ package.packageName }}</div>
    </div>
    <div class="package-image">
      <img :src="package.packageImage" alt="套餐图片">
    </div>
    <div class="package-price">
      <span class="price-icon">¥</span>
      <span class="price-value">{{package.discountedPrice}}</span>
      <div class="discounted-price">¥{{package.originalPrice}}</div>
      <div class="discount-tag">{{package.discount}}折</div>
    </div>
    <div class="order-details">
      <div class="order-type">到店吃套餐</div>
      <div class="dish-list">
        <div class="dish-item" v-for="(dish, index) in dishes" :key="index">
          <div class="dish-name">{{dish.name}}</div>
          <div v-if="dish.recommended" class="recommended - tag">网友推荐</div>
          <div class="dish-quantity">{{dish.quantity}}</div>
          <div class="dish-price">¥{{dish.price}}</div>
        </div>
      </div>
    </div>
    <div class="purchase-notice-container">
      <div class="notice-title">购买须知</div>
      <div class="notice-item">
        <div class="item-title">有效期</div>
        <div class="item-content">2022 - 2 - 24至2022 - 10 - 20</div>
      </div>
      <div class="notice-item">
        <div class="item-title">使用规则</div>
        <div class="item-content">
          <ul>
            <li>商家提供免费WIFI</li>
            <li>商家提供免费停车位</li>
            <li>每桌最多使用1张券</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="total-price-section">
      <span class="original-price">¥{{package.originalPrice }}</span>
      <span class="discount-tag">{{ package.discount }}折</span>
      <span class="discounted-price">¥{{ package.discountedPrice }}</span>
      <button class="submit-order-btn" @click="submitOrder()">提交订单</button>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      package: {
        // packageId: '',
        // packageName: '【特惠季】家庭2 - 3人套餐',
        // packageImage: 'https://so5.360tres.com/t0157daa2141574c361.jpg',
        // discountedPrice: '178',
        // discount: '九',
        // originalPrice: '198',
        // rname: '鼓楼金记涮肉',
      },
      packageId:"1",
      food:{
        userId:1,
        orderType:"美食",
        orderStatus:"待使用",
        totalPrice:"",
        orderTime:"",
        haveTime:"",
        relatedId:"1",
        imgUrl:"",
        dingdanName:"",
        orderNo:"",
      },
      dishes: [
        {
          name: '鸡肉',
          recommended: true,
          quantity: '(2斤)',
          price: 118
        },
        {
          name: '鸡心',
          recommended: false,
          quantity: '(1份)',
          price: 118
        },
        {
          name: '鸡手',
          recommended: false,
          quantity: '(1份)',
          price: 118
        },
        {
          name: '土豆',
          recommended: false,
          quantity: '(1份)',
          price: 118
        },
        {
          name: '宽粉',
          recommended: true,
          quantity: '(1份)',
          price: 118
        },
        {
          name: '玉米饼',
          recommended: false,
          quantity: '(1份)',
          price: 118
        },
        {
          name: '大麦茶',
          recommended: false,
          quantity: '(1份)',
          price: 118
        },
        {
          name: '服务费',
          recommended: false,
          quantity: '(1份)',
          price: 118
        }
      ]
    };
  },
  methods: {
    submitOrder(){
      console.log(this.package)
      this.axios.post('http://localhost:1000/order/addOrder', this.food).then(res => {
            console.log(res.data);
            if (res.data.code === 200) {
              alert('提交成功');


            }
            if (res.data.code === 500) {
              alert('提交失败');
            }
            this.$router.push({name: 'submitResult'});
            })


    },
  },
  created() {
    // this.packageId = this.$route.query.packageId;
    // if (packageId) {
      this.axios.get('http://localhost:1000/food/findMealById?packageId=' + this.packageId)
          .then(res => {
            this.package = res.data.data;
            console.log("根据id查出的数据："+this.package);
            this.food.totalPrice=this.package.discountedPrice;
            this.food.dingdanName=this.package.packageName;
            this.food.imgUrl=this.package.packageImage;
          })
          .catch(error => {
            console.error('获取套餐数据失败', error);
          });
    // }
  },
};
</script>

<style scoped>
.price-order-container {
                   display: flex;
                   align-items: center;
                 }

.original-price {
              color: rgb(128, 128, 128);
              text-decoration: line-through;
              margin-right: 10px;
            }

.discount-tag {
              background-color: orange;
              color: white;
              padding: 2px 6px;
              border-radius: 2px;
              margin-right: 10px;
            }

.discounted-price {
                color: red;
                font-size: 18px;
                margin-right: 10px;
              }

.submit-order-btn {
                    background-color: orange;
                    color: white;
                    border: none;
                    padding: 10px 20px;
                    border-radius: 5px;
                    cursor: pointer;
                  }

/* 样式部分保持不变 */
.purchase-notice-container {
                       background-color: white;
                       padding: 15px;
                       border-radius: 5px;
                     }

.notice-title {
            font-size: 18px;
            margin-bottom: 10px;
          }

.notice-item {
            margin-bottom: 10px;
          }

.item-title {
          font-size: 16px;
          margin-bottom: 5px;
        }

.item-content {
          color: #666;
        }

.item-content ul {
          list-style-type: disc;
          padding-left: 20px;
        }

.submit-order-container {
                    background-color: #f5f5f5;
                    height: 100vh;
                    display: flex;
                    flex-direction: column;
                    padding-bottom: 50px; /* 防止底部元素被固定栏挡住，可根据实际情况调整 */
                    box-sizing: border-box;
                  }

.header {
  background-color: orange;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
}

.back-button {
          cursor: pointer;
        }

.icon-left {
          border: solid white;
          border-width: 0 2px 2px 0;
          display: inline-block;
          padding: 3px;
          transform: rotate(135deg);
          -webkit-transform: rotate(135deg);
        }

.title {
  font-size: 18px;
}

.more-options,
        .refresh-icon {
                     cursor: pointer;
                   }

.restaurant-info {
                background-color: white;
                padding: 15px;
                margin: 10px;
                border-radius: 5px;
              }

.restaurant-name {
                font-size: 16px;
                margin-bottom: 5px;
              }

.package-name {
             font-size: 14px;
             color: #666;
             margin-bottom: 10px;
           }

.package-image img {
             width: 300px; /* 修改图片宽度 */
             height: 200px; /* 修改图片高度 */
             object-fit: cover; /* 控制图片适应方式 */
             margin-bottom: 10px;
           }

.price-info {
           display: flex;
           align-items: center;
         }

.discounted-price {
                color: red;
                font-size: 18px;
                margin-right: 10px;
              }

.original-price {
              color: #999;
              text-decoration: line-through;
              font-size: 14px;
            }

.discount-tag {
              background-color: red;
              color: white;
              padding: 2px 6px;
              border-radius: 2px;
              font-size: 12px;
            }

.order-details {
           background-color: white;
           padding: 15px;
           margin: 10px;
           border-radius: 5px;
         }

.order-type {
           font-size: 16px;
           margin-bottom: 10px;
         }

.dish-list {
          display: flex;
          flex-direction: column;
        }

.dish-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 5px 0;
          border-bottom: 1px solid #f0f0f0;
        }

.dish-name {
          font-size: 14px;
        }

.recommended-tag {
                 background-color: #ffd100;
                 color: white;
                 padding: 2px 6px;
                 border-radius: 2px;
                 font-size: 12px;
               }

.dish-quantity,
        .dish-price {
                  font-size: 14px;
                  color: #666;
                }

.purchase-notice {
              background-color: white;
              padding: 15px;
              margin: 10px;
              border-radius: 5px;
            }

.notice-title {
            font-size: 16px;
            margin-bottom: 10px;
          }

.validity-period {
              color: #666;
            }

.total-price-section {
                   background-color: white;
                   padding: 15px;
                   margin: 10px;
                   border-radius: 5px;
                   display: flex;
                   justify-content: space-between;
                   align-items: center;
                   position: relative;
                   z-index: 1; /* 确保显示在固定栏之上 */
                 }

.total-price {
           color: red;
           font-size: 20px;
         }

.submit-order-btn {
                    background-color: orange;
                    color: white;
                    border: none;
                    padding: 10px 20px;
                    border-radius: 5px;
                    cursor: pointer;
                  }
</style>